<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href=" http://localhost:8080/Electronic_Business/image/favicon.ico" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<script src="js/jquery-1.8.0.js"></script>
<script>
	$(function(){
		//验证用户名
		$("#username").blur(function(){
			var name=document.getElementById("username").value;
			var x=document.getElementById("tsn");
			if(isNaN(name)==false){
				x.style.color="red";

			}else{
				x.style.color="white";
			}
		});
		//验证密码
		$("#password").blur(function(){
			var pass=document.getElementById("password").value;
			var p=document.getElementById("tsp");
			if(isNaN(pass)==false){
				p.style.color="red";

			}else{
				p.style.color="white";
			}
		});
		//验证两次密码是否相同
		$("#2password").blur(function(){
			var pass=document.getElementById("password").value;
			var passs=document.getElementById("2password").value;
			var ps=document.getElementById("ts2p");
			if(pass!=passs){
				ps.style.color="red";
			}else{
				ps.style.color="white";
			}
		});
		//验证电话号码的长度
		$("#telphone").blur(function(){
			var tel=document.getElementById("telphone").value;
			var t=document.getElementById("tst");
			if(tel.length<11){
				t.style.color="red";
			}else{
				t.style.color="white";
			}
			
		});
	});
</script>
</head>
<style>
	#tsn,#tsp,#ts2p,#tst{
		float:left;
		margin:1px;
		height:30px;
		width:300px;
		padding-top:10px;
		padding-left:30px;
		margin-left:300px;
		outline:none;
		font-size:12px;
		color:white;
	}
	*{
		font-size:14px

	}
	 #one{
		font-size:30px;
		
	 }
	 .t1{	
		width:15%;
		padding-left:80px;
		float:left;
		height:100px;	
	 }
	.t2{
		padding-left:20px;
		padding-top:15px;
		width:76%; 
		float:left;
		height:85px;
	
	}
	.t3{
		width:100%;
		height:600px;
		float:left;
		outline:none;

	}
	.t4{
		height:600px;
		width:50%;
		float:left;
		
	}
	.t5{
		float:left;
		margin:1px;
		border:1px solid #c7c7c7;
		height:30px;
		width:300px;
		padding-top:10px;
		padding-left:30px;
		margin-left:300px;
	}

	.i6{
		
		border:1px solid white;
		width:60%;
		padding-left:15px;
		outline:none;
	}
	.btn{
		background-color:#cc0000;
		color:white;
		width:100%;
		height:100%;
		border:none;
	}
	.t6{
		float:left;
		margin:20px;
		height:45px;
		width:330px;
		margin-left:300px;

	}
	.t7{
		float:left;
		width:1200px;
		height:80px;
		padding-left:280px;
		padding-top:10px;
		text-decoration:none;
	}
	
	.abc{
		float:right;
		margin-right:200px;
		}
		
	a:link{
		color:#505050;
		text-decoration:none;
		font-size:14px;
	}
	a:hover{
		font-weight:bold;
		text-decoration:none;
		font-size:14px;
	}	
	#tsy{
		outline:none;
		font-size:12px;
		color:red;
		margin-left:340px;
	}
		
 </style>
 <body>
 <form action="regi" method="post">
	<div class="t1">
		<img src="image/1.png">
	</div>
	<div class="t2">
		<span id="one">欢迎注册</span>
	</div>
	<div class="abc">已有账号？ <a href="Login.jsp">请登录</a></div>
	<div class="abc">
		<img src=""/>
	</div>
	
	<hr color=#e6e6e6 style="width:100%; box-shadow:-8px 0 8px #e6e6e6;">
	
	<div class="t3">
		<div class="t4">
		
			<div class="t5">
				<label>用 户 名</label>
				<input name="name" class="i6" placeholder="您的账户名和登录名" id="username" >
			</div>
			<div id="tsn">
			用户名不能是纯数字，请重新输入！
			</div>
			<div class="t5">
				<label>设置密码</label>
				<input type="password" name="password" class="i6" placeholder="建议至少使用两种字符组合" id="password">
			</div>
			<div id="tsp">
			有被盗风险,建议使用字母、数字和符号两种及以上组合
			</div>
			<div class="t5">
				<label>确认密码</label>
				<input  type="password" name="password" class="i6" placeholder="请再次输入密码" id="2password">
			</div>
			<div id="ts2p">
			两次密码输入不一致
			</div>
			<div class="t5">
				<label>中国 0086</label>
				<input name="tel" class="i6" placeholder="建议使用常用手机" id="telphone">
			</div>
			<div id="tst">
			格式有误
			</div>
			<div class="t5">
				<label>验 证 码</label>
				<input name="encode" class="i6" placeholder="请输入验证码"  style="width:85px;">
				<img title="换一换" src="coder" onclick="this.src='coder?x=' + Math.random();" style="float:right;margin-top:-5px;cursor:pointer;"> 
			</div>
			<div id="tsy">
			${ts}
			</div>

			<div class="t6">
				<input type="submit" value="立即注册" class="btn">
			</div>
			</div>
			</form>
			<div style="float:left;width:180px;height:400px;margin-left:140px;margin-top:50px;">
		<img src="image/zc1.png"><a href="">企业用户注册</a><br><br>
		<hr>
		<img src="image/zc2.png"><a href="">INTERNATIONAL   CUSTOMERS</a>
		</div>
		</div>
		<hr style="width:900px;margin-left:15%;">
		<div class="t7">
		<span>
			<a href="" style="color:grey; text-decoration:none;" >关于我们 | </a>
			<a href="" style="color:grey;text-decoration:none;">联系我们 | </a>
			<a href="" style="color:grey;text-decoration:none;">人才招聘 | </a>
			<a href="" style="color:grey;text-decoration:none;">商家入驻 | </a>
			<a href="" style="color:grey;text-decoration:none;">广告服务 | </a>
			<a href="" style="color:grey;text-decoration:none;">手机京东 | </a>
			<a href="" style="color:grey;text-decoration:none;">友情链接 | </a>
			<a href="" style="color:grey;text-decoration:none;">销售联盟 | </a>
			<a href="" style="color:grey;text-decoration:none;">京东社区 | </a>
			<a href="" style="color:grey;text-decoration:none;">京东公益 </a>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright&copy;2004-2016&nbsp;&nbsp;京东JD.com&nbsp;版权所有</p>
		</span>
	</div>
	 </body>
</html>
